import React from 'react';
import ReactDOM from 'react-dom';
import echarts from 'echarts';

export default React.createClass({

    getInitialState() {
        return {
            expenses: [],
            income: [],
            yearMonth:[]
        }
    },

    drawColumn() {
        var stack = echarts.init(document.getElementById('stack'));

        /* app.title = '';*/
        option = {
            height: 280 ,
            title : {
                text: '财务收入支出统计',
            },
            tooltip : {
                trigger: 'axis'
            },
            color:['#7ecffe', '#f89867'],
            legend: {
                data:['支出','收入',]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data:this.state.yearMonth
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                }
            ],
            series : [
                {
                    name:'支出',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data:  this.state.expenses
                },
                {
                    name:'收入',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data:  this.state.income
                },
            ]
        };

        stack.setOption(option);
    },

    componentDidMount() {
        this.aaAA();
    },

    aaAA() {
        /* let param ={ReqDate: Utils.formatDate(this.state.value) + " 00:00:00"};*/
        let param = Object.assign({}, {'paymentsType':0,'period':12,})
        let _me =this;
        Utils.sendAjax({
            url: '/job/stat/payments',
            type: 'json',
            data:JSON.stringify(param),
            callback: function (result) {
                console.log(result)
                if (result.code == '200') {
                    _me.setState({
                        expenses: result.data.expenses,
                        income:result.data.income,
                        yearMonth:result.data.yearMonth,
                    })
                    _me.drawColumn();

                } else {
                    /* Message.error(result.message)*/
                }
            }
        })
    },

    render () {
        return (
            <div>
                <div id="stack" className="stack"  style={{height:'600px',width:'811px'}}></div>
            </div>
        );
    }
});
